@for $i from 3 through 100 {
  .mr#{$i} {
    margin-right: (0px + $i);
  }

  .ml#{$i} {
    margin-left: (0px + $i);
  }

  .mt#{$i} {
    margin-top: (0px + $i);
  }

  .mb#{$i} {
    margin-bottom: (0px + $i);
  }

  .pr#{$i} {
    padding-right: (0px + $i);
  }

  .pl#{$i} {
    padding-left: (0px + $i);
  }

  .pt#{$i} {
    padding-top: (0px + $i);
  }

  .pb#{$i} {
    padding-bottom: (0px + $i);
  }

  .fz#{$i} {
    font-size: (0px + $i);
  }
}

.flex {
  display: flex;
  flex-direction: row;
}

.f-col {
  flex-direction: column;
}

.just-start {
  justify-content: flex-start;
}

.just-center {
  justify-content: center;
}

.just-between {
  justify-content: space-between;
}

.just-around {
  justify-content: space-around;
}

.just-end {
  justify-content: flex-end;
}

.item-start {
  align-items: flex-start;
}

.item-center {
  align-items: center;
}

.item-end {
  align-items: flex-end;
}

.t-left {
  text-align: left;
}

.t-center {
  text-align: center;
}

.t-right {
  text-align: right;
}

.fwb {
  font-weight: bold;
}




